import RichText from '@/components/rich-text';
import { UploadOutlined } from '@ant-design/icons-vue';
import {
  Button,
  Checkbox,
  CheckboxGroup,
  DatePicker,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RangePicker,
  Select,
  Switch,
  Upload,
} from 'ant-design-vue';
import { defineComponent, PropType, VNode, watch } from 'vue';
import type { ColumnType } from '../pro-table/typing';

export interface AnyObject {
  [key: string]: any;
}

export default defineComponent({
  props: {
    column: {
      type: Object as PropType<ColumnType>,
    },
  },
  setup(props) {
    const { column } = props;
    const valueType = column?.valueType || 'text';
    const antDesginComponents: AnyObject = {
      button: Button,
      input: Input,
      text: Input,
      number: InputNumber,
      select: Select,
      radio: Radio,
      radioGroup: RadioGroup,
      datePicker: DatePicker,
      checkbox: Checkbox,
      checkboxGroup: CheckboxGroup,
      rangePicker: RangePicker,
      richText: RichText,
      switch: Switch,
      upload: Upload,
    };

    const createComponentVNode = (): VNode => {
      const formComponent = antDesginComponents[valueType];
      if (!formComponent) {
        throw new Error('组件类型不正确，无法创建对应的组件！');
      }

      let componentProps: any = {};
      const noAllowClearType = ['radio', 'radioGroup', 'checkbox', 'checkboxGroup'];
      if (!noAllowClearType.includes(valueType)) {
        componentProps.allowClear = true;
        const selectComponentType = ['select', 'datePicker'];
        let placeholderPrefix = '请输入';
        if (selectComponentType.includes(valueType)) {
          placeholderPrefix = '请选择';
        }
        componentProps.placeholder = placeholderPrefix + column?.title;
      }

      const hasFieldNamesComponent = 'select';
      if (hasFieldNamesComponent.split(',').includes(valueType)) {
        componentProps.fieldNames = { label: 'label', value: 'value', options: 'children' };
      }

      const hasOptionsComponent = ['select', 'radioGroup', 'checkboxGroup'];
      if (hasOptionsComponent.includes(valueType)) {
        componentProps.options = column?.options;
      }

      if (column?.customProps) {
        componentProps = { ...componentProps, ...column.customProps };
      }

      componentProps.disabled = column?.disabled;

      if (valueType === 'rangePicker') {
        componentProps.placeholder = undefined;
        componentProps.showTime = column?.showTime;
        componentProps.format = column?.format;
        componentProps.valueFormat = column?.valueFormat;
      }
      let vNode: VNode;
      if (valueType === 'upload') {
        vNode = (
          <formComponent {...componentProps}>
            <Button disabled={column?.disabled}>
              <UploadOutlined />
              上传文件
            </Button>
            <Button type="link" disabled={column?.disabled}>
              下载模板
            </Button>
          </formComponent>
        );
      } else {
        vNode = <formComponent {...componentProps} />;
      }

      return vNode;
    };

    watch(
      () => [column?.value],
      () => {
        console.log(`${column?.dataIndex} column.value:`, column?.value);
        createComponentVNode();
      },
    );
    return () => createComponentVNode();
  },
});
